﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>

    <link rel="stylesheet" href="style/RetrievePassword.css">


    

</head>
<body>

    <div class="wrapper">
        <div id="wizard" class="wizard">
            <div class="wizard__content">
                <header class="wizard__header">
                    <div class="wizard__header-overlay"></div>

                    <div class="wizard__header-content">
                        <h1 class="wizard__title">找回密码</h1>
                    </div>

                    <div class="wizard__steps">
                        <nav class="steps">
                            <div class="step">
                                <div class="step__content">
                                    <p class="step__number"><i class="fa fa-github-alt"></i></p>
                                    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                                        <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none">
                                            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8">
                                    </svg>

                                    <div class="lines">
                                        <div class="line -start">
                                        </div>

                                        <div class="line -background">
                                        </div>

                                        <div class="line -progress">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step">
                                <div class="step__content">
                                    <p class="step__number"><i class="fa fa-book"></i></p>
                                    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                                        <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none">
                                            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8">
                                    </svg>

                                    <div class="lines">
                                        <div class="line -background">
                                        </div>

                                        <div class="line -progress">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step">
                                <div class="step__content">
                                    <p class="step__number"><i class="fa fa-group"></i></p>
                                    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                                        <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none">
                                            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8">
                                    </svg>

                                    <div class="lines">
                                        <div class="line -background">
                                        </div>

                                        <div class="line -progress">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </header>


                <form onsubmit="return check()">
                    <div class="panels">
                        <div class="panel">
                            <header class="panel__header">
                                <h2 class="panel__title">填写账号</h2>    
                            </header>
                            <div class="panel_box">
                                <span>账号：</span><input name="userid" type="text" id="userid" required />
                            </div>
                            <div class="panel_box">
                                <span>验证方式：</span>
                                <input type="radio" name="instanceMethod" value="email" id="instanceMethod"/><label for="instanceMethod">邮箱</label>
                            </div>
                            <div id="error_box"></div>
                        </div>

                        <div class="panel">
                            <header class="panel__header">
                                <h2 class="panel__title">身份验证</h2>
                                <p class="panel__subheading">本次操作需要您本人完成以下验证</p>
                            </header>
                            <div class="panel_box">
                                <span>注册邮箱：</span>
                                <input name="email" type="email"  id="email" required />
                                <button type="button" class="invalid-feedback getValidationCodeBtn " id="getValidationCodeBtn">点击获取验证码</button>
                            </div>
                            <div class="panel_box">
                                <span>验证码：</span><input name="" type="" required />
                            </div>
                            <div id="error_box"></div>
                        
                        </div>

                        <div class="panel">
                            <header class="panel__header">
                                <h2 class="panel__title">请输入新密码</h2>
                                
                            </header>
                            <div  class="panel_box">
                                <span>新密码：</span>
                                <input type="password" id="password"/>
                                <input width=500 type="text" style= "color: red; border-style: solid; border-width:0" id="explain1" readonly/>
                            </div>
                            <div class="panel_box">
                                <span>确认密码：</span>
                                <input type="password" id="againpassword" onBlur="Check()"/>
                                <input width=500 type="text" style= "color: red; border-style: solid; border-width:0" id="explain2" readonly/>
                            </div>
                            <div id="error_box"></div>
                        </div>
                    </div>
                </form>
                

                <div class="wizard__footer">
                    <button class="button previous">上一步</button>
                    <button  type="submit" class="button next btn_register" id="btn_register"  onclick="foLogin2()">下一步</button>
                </div>
            </div>

            <h1 class="wizard__congrats-message">
                √ 找密成功
            </h1>

        </div>
    </div>

    <script src="link/jquery/jquery-3.1.0.min.js"></script>
    <script src="link/bootstrap/js/bootstrap.min.js"></script>
    
    <script src="jquery/validate.js"></script>
    <script src='jquery/lodash.min.js'></script>
    <script src="jquery/RetrievePassword.js"></script>

</body>
</html>